<template>
  <div>
    <div class="uni-user-count-list" v-if="isMainBuilding">
      <div class="uni-user-head uni-flex" @click="isOpen = !isOpen">
        <span>{{buildingName}}在线人数：{{peopleTotal}}人</span>
        <i class="uni-icon el-icon-arrow-down" v-if="isOpen"></i>
        <i class="uni-icon el-icon-arrow-right" v-else></i>
      </div>
      <div class="uni-user-body" :class="[isOpen?'':'uni-hidden']">
        <div class="uni-sub-head">
          员工/外包/借调人数：{{staffTotal}}人
          <el-popover placement="left" width="170" trigger="hover">
            <div class="uni-popover-notice">（标准人数/在线人数）</div>
            <i slot="reference" class="el-icon-question" style="color: #3f8ef7;"></i>
          </el-popover>
        </div>
        <div class="uni-area-body">
          <div class="uni-area" v-for="cj in chejianList" :key="cj.label">{{cj.label}}：（{{cj.standard}}/{{cj.count}}人）</div>
        </div>
        <div class="uni-sub-head" style="margin-bottom: 1px;">
          访客/施工人数：{{guestTotal}}人
        </div>
        <div class="uni-sub-head">
          外来车辆数：{{vehicleTotal}}辆
        </div>
      </div>
    </div>
    <div class="uni-user-count-list" v-else-if="floorIds.indexOf(',') != -1">
      <div class="uni-user-head uni-flex" @click="isOpen = !isOpen">
        <span>{{buildingName}}在线：{{peopleTotal}}人</span>
        <i class="uni-icon el-icon-arrow-down" v-if="isOpen"></i>
        <i class="uni-icon el-icon-arrow-right" v-else></i>
      </div>
      <div class="uni-user-body" :class="[isOpen?'':'uni-hidden']">
        <div class="uni-sub-head">
          员工/外包/借调人数：{{staffTotal}}/{{getChejianStandard(building.gyWorkshopUnitId)}}人
          <el-popover placement="bottom" width="150" trigger="hover">
            <div class="uni-popover-notice">（标准人数/在线人数）</div>
            <i slot="reference" class="el-icon-question" style="color: #3f8ef7;"></i>
          </el-popover>
        </div>
        <div class="uni-area-body">
          <div class="uni-area" v-for="gd in gongduanList" :key="gd.label">{{gd.label}}：（{{gd.standard}}/{{gd.count}}人）</div>
          <div class="uni-area">其他区域：{{chejianOther}}人</div>
        </div>
        <div class="uni-sub-head" style="margin-bottom: 1px;">
          访客/施工人数：{{guestTotal}}人
        </div>
        <div class="uni-sub-head">
          外来车辆数：{{vehicleTotal}}辆
        </div>
      </div>
    </div>
    <div class="uni-user-count-list" v-else-if="floorIds != ''">
      <div class="uni-user-head  uni-flex" @click="isOpen = !isOpen">
        <span>
          {{buildingName}}{{floorMap[floorIds].floorName}}在线：{{staffTotal}}人
          <el-popover placement="bottom" width="150" trigger="hover">
            <div class="uni-popover-notice">（标准人数/在线人数）</div>
            <i slot="reference" class="el-icon-question" style="color: #eeeeee;"></i>
          </el-popover>
        </span>
        <i class="uni-icon el-icon-arrow-down" v-if="isOpen"></i>
        <i class="uni-icon el-icon-arrow-right" v-else></i>
      </div>
      <div class="uni-user-body" :class="[isOpen?'':'uni-hidden']" v-for="(gd,index) in floorGongduanList" :key="index">
        <div class="uni-sub-head">
          {{gd.label}}：（{{gd.count}}/{{gd.standard}}人）
        </div>
        <div class="uni-area-body">
          <div class="uni-area" v-for="(qy,index1) in gd.children" :key="index1">{{qy.label}}：（{{qy.standard}}/{{qy.count}}人）</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { isInPolygon } from '../../../../utils/xcutil.js'
  export default {
    name: 'LoraTotal',
    props: {
      floorIds: {
        type: String,
        default () {
          return ''
        }
      },
      activeBuilding: {
        type: String,
        default () {
          return ''
        }
      }
    },
    data() {
      return {
        isOpen: false,
        totalCount: 0,
        userList: [],
        areaList: [],
        standardList: []
      }
    },
    mounted() {
      this.queryGsAreaList()
      this.gyStandard()
    },
    computed: {
      buildingList: {
        get() {
          // console.log()
          return this.$store.state.shopdata.buildingList;
        }
      },
      building: {
        get() {
          for(var i=0; i<this.buildingList.length; i++) {
            if(this.buildingList[i].value === this.activeBuilding) {
              return this.buildingList[i];
            }
          }
          return {}
        }
      },
      buildingName: {
        get() {
          for(var i=0; i<this.buildingList.length; i++) {
            if(this.buildingList[i].value === this.activeBuilding) {
              return this.buildingList[i].label;
            }
          }
          return ""
        }
      },
      isMainBuilding: {
        get() {
          for(var i=0; i<this.buildingList.length; i++) {
            if(this.buildingList[i].value === this.activeBuilding) {
              if(this.buildingList[i] && this.buildingList[i].param.hasOwnProperty("buildings")) {
                return true;
              }
              return false;
            }
          }
          return false
        }
      },
      floorMap: {
        get() {
          var map = {}
          this.floors.forEach((floor) => {
            map[floor.id] = floor
          })
          return map;
        }
      },
      floors: {
        get() {
          return this.$store.state.shopdata.floorList
        }
      },
      // 总人数
      peopleTotal: {
        get() {
          return this.userList.length;
        }
      },
      // 员工/外包/借调人数
      staffTotal: {
        get() {
          return this.userList.filter((user) => {
            return user.userType === '1' || user.userType === '3'
          }).length;
        }
      },
      // 车间列表
      chejianList: {
        get() {
          var list = []
          var buildings = ''
          for (var i = 0; i < this.buildingList.length; i++) {
            if(this.buildingList[i].value === this.activeBuilding) {
              buildings =  this.buildingList[i].param.buildings || ""
              break;
            }
          }
          for (var i = 0; i < this.buildingList.length; i++) {
            if (buildings.indexOf(this.buildingList[i].value+",") != -1) {
              var userList = this.userList.filter((user) => {
                return (user.userType === '1' || user.userType === '3') && this.floorMap[user.floorId] && this
                  .floorMap[user.floorId].buildingName == this.buildingList[i].value
              })
              list.push({
                label: this.buildingList[i].label,
                count: userList.length,
                standard: this.getChejianStandard(this.buildingList[i].gyWorkshopUnitId)
              })
            }
          }
          return list
        }
      },
      /**
       * 工段
       */
      gongduanList: {
        get() {
          var list = []
          for (var i = 0; i < this.areaList.length; i++) {
            if(this.areaList[i].dataType == '工段' && this.inBuilding(this.areaList[i])) {
              list.push({
                label: this.areaList[i].name,
                count: this.getAreaStaffList(this.areaList[i]).length,
                standard: this.getStandard(this.areaList[i])
              })
            }
          }
          return list
        }
      },
      chejianOther: {
        // 车间非工段区域人数
        get() {
          var count = 0;
          for(var i=0; i<this.gongduanList.length; i++) {
            count += this.gongduanList[i].count
          }
          return this.staffTotal - count;
        }
      },
      floorGongduanList: {
        get() {
          var list = []
          for (var i = 0; i < this.areaList.length; i++) {
            if(this.areaList[i].dataType == '工段' && this.inFloor(this.areaList[i])) {
              var gd = {
                label: this.areaList[i].name,
                count: this.getAreaStaffList(this.areaList[i]).length,
                standard: this.getStandard(this.areaList[i]),
                children: []
              }
              for (var j = 0; j < this.areaList.length; j++) {
                if(this.areaList[j].dataType == '区域' && this.areaList[j].parentId === this.areaList[i].id) {
                  gd.children.push({
                    label: this.areaList[j].name,
                    count: this.getAreaStaffList(this.areaList[j]).length,
                    standard: this.getStandard(this.areaList[j])
                  })
                }
              }
              list.push(gd)
            }
          }
          return list
        }
      },
      // 访客数量
      guestTotal: {
        get() {
          return this.userList.filter((user) => {
            return user.userType === '2'
          }).length;
        }
      },
      // 外来车辆
      vehicleTotal: {
        get() {
          return this.userList.filter((user) => {
            return user.userType === '4'
          }).length;
        }
      }
    },
    methods: {
      // isMainBuilding(buildingValue){
      //   var building = this.getBuilding(buildingValue)
      //   if(building && building.param.hasOwnProperty("buildings")) {
      //     return true;
      //   }
      //   return false;
      // },
      setUserList(users) {
        this.userList = users
      },
      inBuilding(area) {
        if(area.areaType === '单个楼层' && this.floorMap[area.areaInfo] && this.floorMap[area.areaInfo].buildingName === this.activeBuilding) {
          return true;
        }
        if(area.areaType === '整栋建筑' && area.areaInfo === this.activeBuilding) {
          return true;
        }
        if(area.areaType === '自定义区域' && this.floorMap[area.areaFloorId].buildingName === this.activeBuilding) {
          return true;
        }
        return false;
      },
      inFloor(area) {
        if(area.areaType === '单个楼层' && area.areaInfo === this.floorIds) {
          return true;
        }
        if(area.areaType === '整栋建筑' && area.areaInfo === this.activeBuilding) {
          return true;
        }
        if(area.areaType === '自定义区域' && area.areaFloorId === this.floorIds) {
          return true;
        }
        return false;
      },
      getChejianStandard(chejianId) {
        var standardCount = 0
        for(var i=0; i< this.standardList.length; i++) {
          if(chejianId === this.standardList[i].workshopUnitId) {
            standardCount += this.standardList[i].staffCount
          }
        }
        return standardCount;
      },
      getStandard(area) {
        var standardCount = 0
        if(area.dataType === "工段") {
          for(var i=0; i< this.standardList.length; i++) {
            if(area.chejianId === this.standardList[i].workshopUnitId && area.gongduanId === this.standardList[i].workSectionId) {
              standardCount += this.standardList[i].staffCount
            }
          }
        }
        else if(area.dataType === "区域" && area.quyuId != '') {
          for(var i=0; i< this.standardList.length; i++) {
            if(area.chejianId === this.standardList[i].workshopUnitId && area.gongduanId === this.standardList[i].workSectionId && area.quyuId === this.standardList[i].subRegionId) {
              standardCount += this.standardList[i].staffCount
            }
          }
        }
        return standardCount;
      },
      /**
       * 这个区域内的员工/外包/借调列表
       * @param {Object} area
       */
      getAreaStaffList(area) {
        return this.userList.filter((user)=>{
          if(user.userType !== '1' && user.userType !== '3') {
            return false;
          }
          if(area.areaType === '整栋建筑' && area.areaInfo === this.floorMap[user.floorId].buildingName) {
            return true;
          }
          if(area.areaType === '单个楼层' && area.areaInfo === user.floorId) {
            return true;
          }
          if(area.areaType === '自定义区域' && area.areaFloorId === user.floorId && isInPolygon(user.x, user.y, area.areaPoints)) {
            return true;
          }
          return false;
        })
      },
      gyStandard() {
        this.$http({
          url: '/lora/gaiya/gyStandard',
          method: 'get',
          loading: false,
          message: false,
          timeout: 300000
        }).then(({ data }) => {
          if (data && data.success) {
            this.standardList = data.list || []
          }
          setTimeout(()=>{
            this.gyStandard()
          }, 60000*5)
        })
      },
      queryGsAreaList() {
        this.$http({
          url: '/lora/area/jfLoraGsArea/list',
          method: 'get',
          loading: false,
          message: false,
          timeout: 5000
        }).then(({ data }) => {
          // console.log(data)
          if (data && data.success) {
            this.areaList = data.list || []
          } else {
            setTimeout(()=>{
              this.queryGsAreaList()
            }, 4000)
          }
        })
      }
    }
  }
</script>
<style scoped lang="less">
  .uni-user-count-list {
    position: absolute;
    top: 50px;
    right: 10px;
    min-width: 200px;
    background-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 5px 0 #cccccc;

    .uni-user-head {
      width: 100%;
      height: 38px;
      line-height: 36px;
      text-align: left;
      padding: 0 10px;
      font-size: 13px;
      color: #ffffff;
      background-color: #3f8ef7;
      border: 2px solid #3f8ef7;
      justify-content: space-between;
      align-items: center;
      .uni-icon {
        font-size: 16px;
        font-weight: bold;
      }
    }

    .uni-user-body {
      color: #3f8ef7;
      font-size: 12px;
      text-align: center;
      line-height: 30px;
    }
    .uni-user-body.uni-hidden {
      height: 0;
      overflow: hidden;
    }
    .uni-sub-head {
      background-color: #d3e9ff;
      height: 28px;
      line-height: 28px;
      font-size: 12px;
      text-align: left;
      color: #5d5c5c;
      padding-left: 10px;
    }

    .uni-area {
      line-height: 20px;
      font-size: 12px;
      color: #666666;
      text-align: left;
    }

    .uni-area-body {
      padding: 8px 0px 8px 20px;
    }
  }
  .uni-popover-notice {
    font-size: 12px;

    span {
      color: #F5222D;
    }
  }
</style>
